<!--
  Licensed to the Apache Software Foundation (ASF) under one
  or more contributor license agreements.  See the NOTICE file
  distributed with this work for additional information
  regarding copyright ownership.  The ASF licenses this file
  to you under the Apache License, Version 2.0 (the
  "License"); you may not use this file except in compliance
  with the License.  You may obtain a copy of the License at
  <p>
  http://www.apache.org/licenses/LICENSE-2.0
  <p>
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->
<ng2-toasty [position]="'top-center'"></ng2-toasty>
<section class="content--row">
    <div class="row">
        <!-- 文章内容 -->
        <div class="col-md-9">
            <div class="card">
                <!-- 文章用户信息 -->
                <div *ngIf="article" class="card-header border-b-1 px-4 py-3">
                    <div class="card-block d-flex py-3">
                        <div class="mr-auto">
                            <h5>
                                {{ article?.title }}
                                <span *ngIf="(currentDay| date:'yyyyMMdd') === (article.createTime | date:'yyyyMMdd')" class="badge badge-pill badge-danger">新</span>
                                <span *ngIf="article.articleType.id === 1" class="badge badge-pill badge-success">原</span>
                                <span *ngIf="article.articleType.id === 2" class="badge badge-pill badge-info">转</span>
                            </h5>
                        </div>
                        <!--修改历史 -->
                        <div class="ml-4">
                            <div *ngIf="currentUser?.id === article?.user.id" dropdown class="d-none d-sm-inline-block">
                                <div class="btn-group" dropdown container="body" (onShown)="showArticleHistory()">
                                    <button dropdownToggle class="btn btn-outline-info btn-sm top-nav__notify">修改历史</button>
                                    <ul *dropdownMenu class="dropdown-menu">
                                        <li *ngIf="history?.length <= 0; else showHistory">
                                            <span class="dropdown-item">该文章没有任何修改历史</span>
                                        </li>
                                        <ng-template #showHistory>
                                            <li *ngFor="let h of history">
                                                <span class="dropdown-item">{{h.version | date:'yyyy年MM月dd日HH:mm:ss'}}
                                                    <a [routerLink]="['/article/', article.id, 'history', h.version, 'contrast']" class="btn btn-info btn-sm">对比</a>
                                                </span>
                                            </li>
                                        </ng-template>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- 赞功能 -->
                        <div class="ml-4">
                            <div *ngIf="currentUser && currentUser?.id !== article?.user.id; else showfabulousNotCLick">
                                <ng-container *ngIf="fabulousStatus; else showfabulous">
                                    <button type="button" class="btn btn-success btn-sm" tooltip="对该文章点赞" placement="bottom" container="body" (click)="fabulous()">
                                        <span>
                                            <i class="zmdi zmdi-thumb-up zmdi-hc-fw"></i>
                                            <span>{{article.fabulouCount}}</span>
                                        </span>
                                    </button>
                                </ng-container>
                                <ng-template #showfabulous>
                                    <button type="button" class="btn btn-success btn-sm" tooltip="取消对该文章的赞" placement="bottom" container="body" (click)="unFabulous()">
                                        <span>
                                            <i class="zmdi zmdi-thumb-up-down zmdi-hc-fw"></i>
                                            <span>{{article.fabulouCount}}</span>
                                        </span>
                                    </button>
                                </ng-template>
                            </div>
                            <ng-template #showfabulousNotCLick>
                                <button type="button" class="btn btn-success btn-sm disabled" tooltip="用户对该文章赞的总数据" container="body" placement="bottom">
                                    <span>
                                        <i class="zmdi zmdi-thumb-up zmdi-hc-fw"></i>
                                        <span>{{article.fabulouCount}}</span>
                                    </span>
                                </button>
                            </ng-template>
                        </div>
                        <!-- 收藏功能 -->
                        <!-- <div class="ml-4">
                            <div class="btn btn-outline-info btn-icon btn-sm disabled">
                                <a href="">
                                    <i class="fa fa-share-alt"></i>
                                </a> |
                                <a href="">
                                    <span>0</span>
                                </a>
                            </div>
                        </div> -->
                        <!-- 访问量 -->
                        <div class="ml-4">
                            <button type="button" class="btn btn-success btn-sm" tooltip="该文章访问总数据" container="body" placement="bottom">
                                <span>
                                    <i class="zmdi zmdi-eye zmdi-hc-fw"></i>
                                    <span>{{article.viewCount}}</span>
                                </span>
                            </button>
                        </div>
                    </div>
                    <div class="media">
                        <div class="media-body">
                            <div class="user-sm">
                                <div class="article__user__info">
                                    <img class="article__user__img" src="{{ article.user.avatar }}" alt="">
                                    <div class="article__user__name">
                                        <a [routerLink]="['/account', article.user.username, 'info']">{{ article.user.username }}</a> - {{ article.createTime | date:'yyyy年MM月dd日HH:mm:ss'
                                        }} 发布</div>
                                    <!-- 文章标签 -->
                                    <div class="card-block ml-10">
                                        <span *ngFor="let articleTag of article.articleTags" class="badge badge-success ml-2">{{articleTag.title}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 文章内容信息 -->
                <div class="card-body border-b-1">
                    <p class="mb-0">
                        <span *ngIf="article; else loadingData">
                            <wikift-editor id="wikift-editor-{{article.id}}" markdown="{{article.content}}" [tocId]="'#wikift-toc-container'" [preview]="'true'"></wikift-editor>
                        </span>
                        <ng-template #loadingData>
                            数据加载中...
                        </ng-template>
                    </p>
                </div>
                <!-- 文章附属信息 -->
                <div class="card-footer d-flex px-4 py-3">
                    <div class="mr-auto">
                        该文章由用户
                        <a *ngIf="article?.user" [routerLink]="['/account', article.user.username, 'info']">{{ article.user.username }}</a> 于 {{ article?.createTime | date:'yyyy年MM月dd日HH:mm:ss' }} 发布&nbsp;
                        <div *ngIf="currentUser?.id === article?.user.id" dropdown class="d-none d-sm-inline-block">
                            <a dropdownToggle>
                                <i class="zmdi zmdi-more"></i>
                            </a>
                            <!-- 文章操作工具 -->
                            <div *dropdownMenu class="dropdown-menu dropdown-menu-left">
                                <a [routerLink]="['/article/', article.id, 'editor']" class="dropdown-item">
                                    <i class="zmdi zmdi-edit"></i>
                                    <small> 编辑该文章</small>
                                </a>
                                <a (click)="deleteArticle()" class="dropdown-item">
                                    <i class="zmdi zmdi-delete"></i>
                                    <small> &nbsp;删除该文章</small>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 评论功能 -->
            <div class="card">
                <div class="card-header border-b-1 px-4 py-3">
                    <div class="card-block">
                        <h2 class="card-title">对
                            <<em>{{article?.title}}</em>> 文章的评论 (该文章共有{{article?.commentsCount}}条评论)</h2>
                    </div>
                </div>
                <!-- 评论键入器 -->
                <div class="card-body">
                    <div *ngIf="currentUser && currentUser?.id !== article?.user.id">
                        <wikift-editor [id]="wikift-comment" [height]="200" [mode]="'comment'" [watch]="false" (getEditorValue)="getData($event)"></wikift-editor>
                        <div class="actions" style="margin-top: -11px;">
                            <a class="btn btn-info" [ngClass]="{'disabled': commentContext == ''}" (click)="publishComment()">发布评论</a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 评论列表 -->
            <div class="card">
                <div class="messages__content">
                    <div *ngFor="let comment of comments" class="messages__item border-b-1">
                        <a [routerLink]="['/account', article.user.username, 'info']">
                            <img src="{{comment.user.avatar}}" class="messages__avatar" alt="{{comment.user.username}}">
                        </a>
                        <div class="messages__details">
                            <p>
                                <wikift-editor id="wikift-comment-{{comment.id}}" [markdown]="comment.content" [tocId]="'#wikift-toc-container'" [preview]="'true'"></wikift-editor>
                            </p>
                            <small>
                                <i class="zmdi zmdi-time"></i> {{ comment.createTime | date:'yyyy年MM月dd日HH:mm:ss' }} 评论
                                <div class="d-none d-sm-inline-block">
                                    <ng-template #deleteCommentTemplate>
                                        评论删除后无法还原? 确定删除当前评论?
                                        <div align="right" style="margin-top: 15px;">
                                            <button type="button" class="btn btn-sm btn-outline-info" (click)="deleteArticleComment(comment.id)">删除评论</button>
                                        </div>
                                    </ng-template>
                                    <a *ngIf="currentUser.id === comment.user.id" [popover]="deleteCommentTemplate" popoverTitle="删除该评论" container="body">
                                        <i class="zmdi zmdi-delete"></i>
                                    </a>
                                </div>
                            </small>
                        </div>
                    </div>
                </div>
                <div class="mr-center">
                    <pagination *ngIf="comments?.length && page" [(ngModel)]="currentPage" totalItems="{{page.totalElements}}" [maxSize]="page.size"
                        (pageChanged)="pageChanged($event)" [boundaryLinks]="true" [rotate]="false" (numPages)="numPages = $event">
                    </pagination>
                </div>
            </div>
        </div>
        <!-- 文章属性 -->
        <div class="col-md-3">
            <!-- 浏览趋势 -->
            <div class="card">
                <div class="card-header border-b-1 px-4 py-3">
                    <div class="card-block">
                        <h2 class="card-title">浏览趋势</h2>
                    </div>
                </div>
                <div class="card-body">
                    <div echarts [options]="visitArticleThrendChart" class="comments-counter-chart"></div>
                </div>
            </div>
            <!-- 文章作者 -->
            <div class="card">
                <div class="card-body">
                    <div *ngIf="article" class="card-header px-4 py-3">
                        <div class="card-block d-flex">
                            <div class="mr-auto d-flex justify-content-center flex-wrap p-2">
                                <div class="media">
                                    <div class="media-body">
                                        <div class="user-sm">
                                            <div class="article__user__info mr-auto">
                                                <img class="article__user__img" src="{{article.user.avatar}}" alt="{{article.user.username}}">
                                                <div class="article__user__name">
                                                    <a [routerLink]="['/account', article.user.username, 'info']">{{article.user.username}}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ml-4">
                                <div *ngIf="currentUser">
                                    <div *ngIf="isFollow; else unfollowUser" class="d-flex justify-content-center flex-wrap p-2">
                                        <a class="btn btn-success btn-sm m-2" [ngClass]="{'disabled': currentUser?.id === article?.user.id}" (click)="follow()">
                                            <i class="zmdi zmdi-account zmdi-hc-fw mr-1"></i>关注该用户
                                        </a>
                                    </div>
                                    <ng-template #unfollowUser>
                                        <div class="d-flex justify-content-center flex-wrap p-2">
                                            <a class="btn btn-success btn-sm m-2" (click)="unfollow()">
                                                <i class="zmdi zmdi-account zmdi-hc-fw mr-1"></i>取消关注该用户
                                            </a>
                                        </div>
                                    </ng-template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 文章专栏/空间 -->
            <div class="card">
                <div class="card-body">
                    <div *ngIf="article" class="card-header px-4 py-3">
                        <div class="card-block d-flex">
                            <div class="mr-auto d-flex justify-content-center flex-wrap p-2">
                                <div class="media">
                                    <div class="media-body">
                                        <div class="user-sm">
                                            <div class="article__user__info mr-auto">
                                                <img class="article__user__img" src="{{article.space.avatar}}" alt="{{article.space.name}}">
                                                <div class="article__user__name">
                                                    <a>{{article.space.name}}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="ml-4">
                                <button [routerLink]="[ '/space/', article.space.code, 'display']" class="contacts__btn ">进入空间</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 评论趋势 -->
            <div class="card">
                <div class="card-header border-b-1 px-4 py-3">
                    <div class="card-block">
                        <h2 class="card-title">评论趋势</h2>
                    </div>
                </div>
                <div class="card-body">
                    <div *ngIf="currentUser; else noLogin" echarts [options]="commentArticleThrendChart" class="comments-counter-chart"></div>
                    <ng-template #noLogin>
                        <div class="mr-center">
                            该功能需要用户登录才可使用,请
                            <a [routerLink]="['/user/login']">登录</a>
                        </div>
                    </ng-template>
                </div>
            </div>
            <!-- 文章目录 -->
            <div class="card">
                <div class="card-header border-b-1 px-4 py-3 mr-center">
                    <div class="card-block">
                        <h2 class="card-title">文章目录</h2>
                    </div>
                </div>
                <div class="card-body">
                    <div class="markdown-body editormd-preview-container-article" style="height:430px" id="wikift-toc-container"></div>
                </div>
            </div>
        </div>
    </div>
</section>